<template>
  <div class="CommerceBlock">
    <div class="header" style="position: relative;height: 62px;">
      <span class="title">{{datas.title}}</span>
      <router-link :to="datas.url+'?show=true'" class="more" style="position: relative;">更多>></router-link>
    </div>
    <div class="list" style="position: relative;">
      <ul style="position: relative;z-index:666;">

        <li v-for="item in datas.list" v-bind:key="item.id">
          <router-link v-bind:key="item.id" :to="{path:datas.url+'/NewsInfo?id='+item.id}" style="width: 32rem;">
          <a v-html="item.title" class="commer_a"></a>
          <span  class="commer_span">[{{item.date}}]</span>
          </router-link>
       </li>

      </ul>
    </div>
  </div>
</template>

<script>
import baseConfig from 'baseConfig'

export default {
  name: 'CommerceBlock',
  props: {
    datas: {
      type: Object,
      // 对象或数组且一定会从一个工厂函数返回默认值
      default: function () {
        return baseConfig.news
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import 'publicLib/scss/defualtScss.scss';
ul li{
  list-style: none;
}
.header .CommerceBlock .gongqiu .more[data-v-0df686a2]{
  position: relative;
  font-size: 1rem;
  right: -3rem;
  cursor: pointer;
}
.CommerceBlock{
  height: 20rem;
  border: #D6D6D6 0.05rem solid;
  background-color: white;
  padding: 0 1rem;

  .header{
    position: relative;
    display: flex;
    align-items: center;
    color: $contect-us-color;
    font-size: 1.1rem;
    border-bottom: #D6D6D6 0.25rem solid;

    .title{
      padding: 1rem;
      font-weight: bold;
      display: inline-block;
      float: left;
      width: 170px;
      text-align: left;
    }

    .more{
      display:inline-block;
      width:350px;
      height: 62px;
      line-height: 62px;
      font-size: 1rem;
      text-align: right;

      /*<!--right:-20rem;-->*/
      cursor: pointer;
    }

  }


  .list{
    line-height: 2.6rem;
    font-size: $font-size-normol;
    color: $data-detail-font-color;

    ul{
      text-align: left;
      padding-left: 1rem;
    }

    li{
      border-bottom: #D6D6D6 0.09rem dashed;
      position: relative;

      a{
        display: block;
        width: 28rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #58585c;

        &:hover{
          color: red;
        }
      }

      &:hover{
        color: red;
      }

      span:nth-child(2){
        position: absolute;
        right:0;
        top: 0;
      }
      .commer_a{
        float: left;width:84%;display:inline-block;
      }
      .commer_span{
        float: right;width: 60px;display:inline-block;
      }
    }
  }
}

</style>
